<template>
  <div class="Task">
    <el-table :data="filterTaskData" style="width: 100%">
      <el-table-column label="名称" prop="TaskName" />
      <el-table-column label="任务组" prop="TaskGroup" />
      <el-table-column label="Cron表达式" prop="TaskCron" />
      <el-table-column label="累计运行" prop="RunsCount" />
      <el-table-column label="状态" prop="Status" />
      <el-table-column label="描述" prop="Description" />
      <el-table-column label="创建时间" prop="CreateTime" />
      <el-table-column align="right">
        <template #header>
          <el-input
            v-model="search"
            size="small"
            placeholder="任务名称"
          />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.Task {
  height: calc(100vh - 110px);
  /* border: 1px saddlebrown solid; */
}
</style>

<script setup>
import { ref, onMounted, computed, watch } from "vue";
import { inject } from "vue";
const axios = inject("axios");

const TaskData = ref([]);

const search = ref("");
const filterTaskData = computed(() =>
  TaskData.value.filter((data) => {
    const includesSearch = data.TaskName.toLowerCase().includes(
      search.value.toLowerCase()
    );
    return !search.value || includesSearch;
  })
);

watch(filterTaskData, (newvalue) => {
  console.log(newvalue);
});

onMounted(() => {
  //查询任务
  axios.get("BBS_Task/GetTask", null, null, (res) => {
    if (res.state == 200) {
      var data = JSON.parse(res.data);
      // Object.assign(TaskData, data);
      TaskData.value = data;
    }
  });
});
</script>
